import React, { useState ,useEffect} from 'react'
import {useDispatch} from 'umi'
import { Form, Input, Button, Select, Modal,Image } from 'antd';
const { Option } = Select;
const formRef = React.createRef();
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 4,
    span: 16,
  },
};
export default function MenuModal(props) {
  const dispatch=useDispatch()
  const [isModalVisible, setIsModalVisible] = useState(true)
  const [dataObj, setdataObj] = useState(null)
  const [imgSrc, setImgSrc] = useState('')
  useEffect(() => {
    // console.log(props.modalData);
    const data=props.modalData
    setImgSrc(data.coverpic)
    formRef.current.setFieldsValue(data)
  }, [])
  //监听发送修改请求
  useEffect(() => {
    if(dataObj){
      // console.log(dataObj);
      dispatch({
        type:'menuModule/updateMenuOne',
        payload:dataObj
      })
    }
  }, [dataObj])
  //模态框控制
  const handleCancel = () => {
    setIsModalVisible(false);
    props.setModal()
  };
  //表单提交
  const onFinish = (values) => {
    setdataObj({
      ...values
    })
    props.setModal()
  };

  return (
    <Modal
      title="修改菜品"
      visible={isModalVisible}
      onCancel={handleCancel}
      footer
    >
      <Form {...layout} ref={formRef} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="_id"
          label="菜品编号"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input disabled/>
        </Form.Item>
        <Form.Item
          name="name"
          label="菜品名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="coverpic"
          label="图片"
        >
          <Image
            width={100}
            src={imgSrc}
          />
        </Form.Item>
        <Form.Item
          name="needtime"
          label="菜品的时间"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="isFree"
          label="是否限时免费"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="请选择"
            allowClear
            style={{ width: 130 }}
          >
            <Option value="Y" >是</Option>
            <Option value="N" >否</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="isHot"
          label="是否热点商品"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="请选择"
            allowClear
            style={{ width: 130 }}
          >
            <Option value="Y" >是</Option>
            <Option value="N" >否</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="grade"
          label="需要厨师等级"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="请选择"
            allowClear
            style={{ width: 130 }}
          >
            <Option value="1">切墩(1级)</Option>
            <Option value="2">切墩(2级)</Option>
            <Option value="3">切墩(3级)</Option>
            <Option value="4">切墩(4级)</Option>
            <Option value="5">切墩(5级)</Option>
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  )
}
